<template>
	<div class="mycenternav">
		<ul>
			<li v-for="(v,i) in arr" :key="i">
				<p>{{v.title}}</p>
				<span>{{v.content}}</span>
				<img src="img/arrowright.png" />
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				arr:[
					{"title":"绑定手机","content":"133******00"},
					{"title":"身份认证","content":"*三"},
					{"title":"登录密码","content":"已设置"},
					{"title":"绑定邮箱","content":"去绑定"},
					{"title":"账号保护","content":"去开启"},
					{"title":"登录方式","content":"去开启"},
					{"title":"安全设备","content":"2台"},
					{"title":"授权管理","content":""},
					{"title":"登录记录","content":"01-08 09:31 用户登录"},
					{"title":"敏感记录","content":""},
					{"title":"关联账号","content":"通过实名/手机查询"},
					{"title":"账号申诉","content":"登录异常、手机停用、解换绑..."},
					{"title":"账号冻结","content":"手机被盗，账号遇到风险"},
					{"title":"账号注销","content":"永久注销、无法恢复、请谨慎..."}
				]
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.mycenternav{
		ul{
			background-color: #FFFFFF;
			padding-top: 0.3rem;
			width: 100%;
			li{
				width: calc(100% - 0.3rem);
				padding-left: 0.15rem;
				padding-right: 0.15rem;
				height: 0.6rem;
				border-bottom: 0.02rem solid #efefef;
				position: relative;
				p{
					font-size: 0.16rem;
					position: absolute;
					left: 0.15rem;
					top: 0.2rem;
				}
				span{
					font-size: 0.12rem;
					color: #92999f;
					position: absolute;
					right: 0.33rem;
					top: 0.23rem;
				}
				img{
					position: absolute;
					right: 0.15rem;
					top: 0.25rem;
				}
			}
			li:nth-of-type(4),li:nth-of-type(8),li:nth-of-type(11),li:nth-of-type(14){
				border-bottom: 0.1rem solid #f8f8f8;
			}
		}
	}
</style>
